<template>
  <div class="question-list">
    <div class="flex py-3">
      <h3 class="text-xl font-600">问大家</h3>
    </div>
    <div class="py-1.5">
      <template v-if="questionList.length === 0">
        <p class="text-gray-600 text-sm">暂无问答</p>
      </template>
      <template v-else>
        <div
          v-for="(item, index) in questionList.slice(0, 3)"
          :key="item.id"
          class="py-2.5"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <img
                style="width: 23px; height: 23px"
                src="https://img11.360buyimg.com/imagetools/jfs/t1/258192/20/4683/2214/676fb455F5d459d15/e128d18f15db703e.png"
                alt=""
              />
              <h3 class="text-sm font-500">
                {{ item.question }}
              </h3>
            </div>
          </div>
          <div class="py-2.5 pl-2.5">
            <div
              v-for="(answer, index) in item.replies.slice(0, 1)"
              :key="index"
              class="pt-2.5"
            >
              <div class="flex items-center gap-2">
                <img
                  style="width: 26px; height: 26px"
                  src="http://storage.360buyimg.com/i.imageUpload/7764634c6c4f4c73444658616d6931373232393139323936313436_sma.jpg"
                  alt=""
                />
                <h5 class="text-3.5 font-500">
                  {{ answer.nickName }}
                </h5>
              </div>
            </div>
            <div class="pl-10 pt-2.5">
              <div class="flex items-center gap-2 cursor-pointer" @click="dialogVisible = true">
                <span class="text-sm text-blue-500">查看更多{{ item.replies.length }}个回答</span
                ><el-icon><ArrowDown /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex justify-center mt-5">
      <button
        size=""
        class="text-4 font-600 border-1 border-gray rounded-sm px-5 py-2.5"
        @click="dialogVisible = true"
      >
        我要提问
        <el-icon size="14"><ArrowRight /></el-icon>
      </button>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="70%"
    :close-icon="CloseBold"
    center
    :before-close="handleClose"
    class="comment-dialog bg-gray-600 overflow-hidden"
  >
    <template #title>
      <div class="pt-5 px-5">
        <h3 class="font-600 text-lg text-left">问大家</h3>
      </div>
    </template>
    <div class="pl-5 pt-5 pr-2">
      <div class="flex items-center gap-2 pr-3">
        <div
          class="flex gap-2 transition flex-1 items-center border-1 px-1 py-1 border-rounded-xl input-box pos-relative"
          style="align-items: stretch"
        >
          <div class="input-tips pos-absolute" v-show="showTips">
            <span class="text-3 text-white">最多{{ MaxQuestionLength }}个字符</span>
          </div>
          <textarea
            ref="textareaRef"
            placeholder="发布关于商品功能、体验的问题，我们会邀请买过的人帮您解答"
            class="no-border flex-1 base-input"
            v-model="inputQuestion"
            rows="1"
            :maxlength="MaxQuestionLength"
            @input="focusTextarea"
          ></textarea>
          <span class="text-sm text-gray-400 flex items-center"
            >{{ inputQuestion.length }}/{{ MaxQuestionLength }}</span
          >
          <div class="bg-red text-white border-rounded-lg px-2.5 flex">
            <span class="margin-auto flex items-center" style="height: auto">
              发布问题
            </span>
          </div>
        </div>
        <el-button type="">我的问答</el-button>
      </div>
      <div class="pt-5">
        <el-scrollbar height="470px" @end-reached="loadMoreQuestion">
          <div class="pr-6">
            <div v-for="(item, index) in questionList" :key="item.id" class="py-2.5">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <img
                    style="width: 26px; height: 26px"
                    src="https://img20.360buyimg.com/img/jfs/t1/264458/14/19187/1114/67ac66ebFfd808e6b/92fc990827d1c9e4.png"
                    alt=""
                  />
                  <h3 class="text-lg font-600">
                    {{ item.question }}
                  </h3>
                  <span class="text-sm text-gray-400">{{ item.createTime }}</span>
                </div>
                <div class="text-sm text-gray-400">
                  <el-dropdown @command="">
                    <span class="el-dropdown-link">
                      <el-icon size="16"><MoreFilled /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="a">举报</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="py-2.5 pl-2.5">
                <div v-for="(answer, index) in item.replies" :key="index" class="pt-2.5">
                  <div class="flex items-center gap-2">
                    <img
                      style="width: 26px; height: 26px"
                      src="http://storage.360buyimg.com/i.imageUpload/7764634c6c4f4c73444658616d6931373232393139323936313436_sma.jpg"
                      alt=""
                    />
                    <h5 class="text-4 font-600">
                      {{ answer.nickName }}
                    </h5>
                    <span
                      class="text-2.5 text-red-600 border-1 border-red-5 px-1 py-0.5 border-rounded-sm"
                      style="line-height: 1"
                      >{{ answer.identity }}</span
                    >
                  </div>
                  <div class="pl-10 pt-2.5">
                    <p class="text-sm text-gray-700 text-left">{{ answer.content }}</p>
                    <div class="flex mt-2 justify-between items-center">
                      <div class="text-3.5 text-gray-500">
                        <span class="mr-2">{{ answer.createTime||'- -' }}</span>
                        <span>{{ answer.city||'未知' }}</span>
                      </div>
                      <div
                        class="flex justify-end gap-3.5 items-center line-height-loose text-sm text-gray-500"
                      >
                        <el-dropdown @command="">
                          <span class="el-dropdown-link">
                            <el-icon size="16"><MoreFilled /></el-icon>
                          </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item command="a">举报</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <span class="flex items-center gap-1 cursor-pointer">
                          <el-icon size="16"><Pointer /></el-icon>
                          有用
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <template #footer> </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import {
  ArrowRight,
  CloseBold,
  MoreFilled,
  ChatDotRound,
  ArrowDown,
  Pointer,
} from "@element-plus/icons-vue";
import { questionAnswerList } from "@/mock/data/question";
console.log(questionAnswerList);
const dialogVisible = ref(false);
const MaxQuestionLength = 50; // 最大问题长度
const handleClose = (done: () => void) => {
  done();
};
const questionList = ref(structuredClone(questionAnswerList));
console.log(questionList.value);
const textareaRef = ref<HTMLTextAreaElement | null>(null);
const inputQuestion = ref("");
const focusTextarea = () => {
  if (!textareaRef.value) return;
  if (inputQuestion.value.length > MaxQuestionLength) {
    return;
  }
  textareaRef.value.style.height = "auto";
  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
};
const showTips = computed(() => {
  console.log(inputQuestion.value.length >= MaxQuestionLength);
  return inputQuestion.value.length >= MaxQuestionLength;
});

const loadMoreQuestion = () => {
  questionList.value.push(...structuredClone(questionAnswerList));
};
</script>
<style lang="scss" scoped>
.input-box {
  border: 1px solid red;
  textarea {
    line-height: 20px; /* 关键：设置固定行高（单位：px），用于后续行数计算 */
    resize: none; /* 禁止用户手动调整textarea大小 */
    overflow-y: auto; /* 超过最大高度时显示垂直滚动条 */
    min-height: 20px; /* 最小高度（1行） */
    max-height: 50px; /* 最大高度（2行 = 行高×2） */
    padding: 5px; /* 内边距（可选，提升输入体验） */
    font-size: 13px;
    overflow: hidden;
    box-sizing: border-box; /* 确保内边距和边框包含在元素总高度内 */
  }
}
.input-box:has(textarea:focus) {
  border-color: #ff0000; /* 红色边框（示例，可替换为任意颜色） */
  box-shadow: 0 0 6.5px rgba(255, 0, 0, 0.3); /* 可选：添加红色阴影增强视觉效果 */
  background-color: #fff0f021; /* 可选：浅红色背景，进一步提升反馈 */
  transition: all 0.3s ease; /* 可选：添加过渡动画，使样式变化更平滑 */
}

.input-tips {
  top: 100%;
  left: 25%;
  background-color: #000000b7;
  padding: 2px 5px 5px 5px;
  border-radius: 5px;
  &::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent; /* 左边框透明 */
    border-right: 5px solid transparent; /* 右边框透明 */
    border-bottom: 6px solid rgba(3, 3, 3, 0.658);
  }
}

.comment-dialog {
  max-width: 750px !important;
}
</style>
